<template>
  <div>
    <!-- 1.头部组件 -->
    <topNav titleText="栏目管理"></topNav>

    <!-- 2.栏目 -->
    <div class="column">
      <!-- 2.1删除频道 -->
      <div class="delBox">
        <h2>点击删除以下频道</h2>
        <div class="itemBox">
          <div
            @click="delItem(index)"
            class="item"
            v-for="(item,index) in hotList"
            :key="item.id"
          >{{item.name}}</div>
        </div>
      </div>
      <!-- 2.1添加频道 -->
      <div class="addBox">
        <h2>点击添加以下频道</h2>
        <div class="itemBox">
          <div
            @click="addItem(index)"
            class="item"
            v-for="(item,index) in delList"
            :key="item.id"
          >{{item.name}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//引入头部组件
import topNav from "@/components/topNav";
export default {
  components: {
    topNav: topNav
  },
  data() {
    return {
      hotList: [],
      delList: []
    };
  },
  mounted() {
    //挂载成就获取本地数据
    this.hotList = JSON.parse(localStorage.getItem("hotList"));
    this.delList = JSON.parse(localStorage.getItem("delList"));
    console.log(this.hotList);
    console.log(this.delList);

    //如果本地的hostList数组长度为0则发起axios请求
    //此时hostList数组将被赋值所有数据，delList数组则为空数组
    if (!this.hotList) {
      this.$axios({
        url: "/category"
      }).then(res => {
        console.log(res.data);
        this.hotList = res.data.data;
        this.delList = [];
      });
    }
  },

  methods: {
    //删除频道函数
    delItem(index) {
      //删除热门数组
      //1.判断hotList数组的长度，当长度为1时，不能继续删除
      if (this.hotList.length == 1) {
        return;
      }
      //2.先把热门数组要删除的数据项添加到delList数组
      //先判断delList数组有没有这一项，如没有再添加
      if (this.delList.indexOf(this.hotList[index]) == -1) {
        this.delList.push(this.hotList[index]);
      }
      //3.再把数据项从hotList删除
      this.hotList.splice(index, 1);

      //做完删除后，将hotList和delList数据存储在本地
      localStorage.setItem("hotList", JSON.stringify(this.hotList));
      localStorage.setItem("delList", JSON.stringify(this.delList));
    },
    //添加频道函数
    addItem(index) {
      //添加频道
      //1.先把delList数组要删除的数据项添加到hotList数组
      //先判断hotList数组有没有这一项，如没有再添加
      if (this.hotList.indexOf(this.delList[index]) == -1) {
        this.hotList.push(this.delList[index]);
      }
      //2.再把数据项从hotList删除
      this.delList.splice(index, 1);
      //做完删除后，将hotList和delList数据存储在本地
      localStorage.setItem("hotList", JSON.stringify(this.hotList));
      localStorage.setItem("delList", JSON.stringify(this.delList));
    }
  }
};
</script>

<style lang="less" scoped>
.column {
  padding: 0 5.556vw;
  .delBox {
    margin-bottom: 5.556vw;
    h2 {
      margin-bottom: 2.778vw;
      padding-left: 1.667vw;
      font-size: 3.889vw;
      color: #888;
    }
    //数据项
    .itemBox {
      display: flex;
      flex-wrap: wrap;
      //每一项数据
      .item {
        margin: 2.778vw 1.667vw;
        padding: 2.778vw 4.444vw;
        border: 1px solid skyblue;
      }
    }
  }
  .addBox {
    h2 {
      margin-bottom: 2.778vw;
      padding-left: 1.667vw;
      font-size: 3.889vw;
      color: #888;
    }
    //数据项
    .itemBox {
      display: flex;
      flex-wrap: wrap;
      //每一项数据
      .item {
        margin: 2.778vw 1.667vw;
        padding: 2.778vw 4.444vw;
        border: 1px solid skyblue;
      }
    }
  }
}
</style>